<template>
	<div class="review-content">
		<!-- 审核确认弹框 -->
		<AuditConfirm ref="auditDialog" :submit="openSeaMoonDialog" />
		<div class="head">
			<span class="title">
				总代分红审核详情
			</span>
			<div class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<div class="review-content">
				<p class="name">
					总代账号信息
				</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="'总代账号'"
							min-width="160"
						>
							<template>
								{{ proxyBaseInfo.userName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="'所属商户'"
							min-width="160"
						>
							<template>
								{{ proxyBaseInfo.merchantName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="'业务模式'"
							min-width="160"
						>
							<template>
								{{
									mappingBusinessModel(
										proxyBaseInfo.businessModel
									) || '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="'总代分组'"
							min-width="160"
						>
							<template>
								{{ proxyBaseInfo.groupName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="'账号状态'"
							min-width="160"
						>
							<template>
								<span
									v-if="proxyBaseInfo.loginLockStatus === 1"
									class="disableRgba"
								>
									{{ $t('common.login_lock_status') }}
								</span>
								<span
									v-if="proxyBaseInfo.paymentLockStatus === 1"
									class="deleteRgba"
								>
									{{ $t('common.account_lock_status') }}
								</span>
								<span
									v-if="
										proxyBaseInfo.loginLockStatus === 0 &&
											proxyBaseInfo.paymentLockStatus ===
												0
									"
									class="normalRgba"
								>
									{{ $t('common.account_status_normal') }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="'代理标签'"
							min-width="160"
						>
							<template>
								{{ proxyBaseInfo.labelName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.register_time')"
							min-width="160"
						>
							<template>
								{{ proxyBaseInfo.createdAt || '-' }}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">
					分红周期内团队数据
					<span>
						(分红周期：{{
							recordInfo.startDate &&
								recordInfo.startDate.replace(/\//g, '-')
						}}
						～
						{{
							recordInfo.endDate &&
								recordInfo.endDate.replace(/\//g, '-')
						}})
					</span>
				</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="venueConfList"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column align="center" :label="'场馆名称'">
							<template slot-scope="scope">
								{{ scope.row.venueTypeName || '-' }}
							</template>
						</el-table-column>
						<el-table-column prop="validBetTotal" label="有效投注">
							<template slot-scope="scope">
								<span>
									{{ handleCurrency('USDT') }}
									{{
										handleNumber(
											'USDT',
											scope.row.validBetAmount
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="winTotal" label="会员盈亏">
							<template slot-scope="scope">
								<span
									:style="
										handleNumberColor(scope.row.winAmount)
									"
								>
									{{ handleCurrency('USDT') }}
									{{
										handleNumber(
											'USDT',
											scope.row.winAmount
										)
									}}
								</span>
							</template>
						</el-table-column>

						<el-table-column prop="rebateAfter" label="有效盈余比">
							<template slot-scope="scope">
								<span>
									{{
										handlePercentage(scope.row.surplusRate)
									}}
								</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">
					本次分红数据
				</p>
				<div style="margin-top: 10px">
					实发分红
					<span>
						{{ handleCurrency('USDT') }}
						{{ handleNumber('USDT', recordInfo.actAmount) }}
					</span>
					<span
						v-if="
							handleNumber('USDT', recordInfo.actAmount) !==
								handleNumber('USDT', recordInfo.amount)
						"
					>
						(应发分红
						<span>
							{{ handleCurrency('USDT') }}
							{{ handleNumber('USDT', recordInfo.amount) }}
						</span>
						)
					</span>
				</div>
				<div style="margin-top: 10px">
					分红周期：{{
						recordInfo.startDate &&
							recordInfo.startDate.replace(/\//g, '-')
					}}
					～
					{{
						recordInfo.endDate &&
							recordInfo.endDate.replace(/\//g, '-')
					}})
				</div>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="venueConfList"
						show-summary
						style="width: 100%"
						:summary-method="(val) => handleRow2(val, subSummary2)"
						:header-cell-style="getRowClass"
					>
						<el-table-column align="center" :label="'场馆名称'">
							<template slot-scope="scope">
								{{ scope.row.venueTypeName || '-' }}
							</template>
						</el-table-column>
						<el-table-column prop="validBetTotal" label="有效投注">
							<template slot-scope="scope">
								<span>
									{{ handleCurrency('USDT') }}
									{{
										handleNumber(
											'USDT',
											scope.row.validBetAmount
										)
									}}
								</span>
							</template>
						</el-table-column>

						<el-table-column prop="rebateAfter" label="分红比例">
							<template slot-scope="scope">
								<span>
									{{ handlePercentage(scope.row.rate) }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="rebateAfter"
							label="平台占成比例"
						>
							<template slot-scope="scope">
								<span>
									{{ handlePercentage(scope.row.platRate) }}
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="amountTotal" label="应发分红">
							<template slot-scope="scope">
								<span>
									{{ handleCurrency('USDT') }}
									{{ handleNumber('USDT', scope.row.amount) }}
								</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('funds.fund_audit.audit_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('funds.fund_audit.audit_user_1') }}:
						{{ recordInfo.firstAuditBy || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_1') }}:
						{{ recordInfo.firstAuditAt || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_remark_1') }}:
						<span class="txtfeed world_break">
							{{ recordInfo.firstAuditRemark || '-' }}
						</span>
					</div>
				</div>
				<div class="review-flex">
					<div>
						{{ $t('funds.fund_audit.audit_user_2') }}:
						{{ recordInfo.secAuditBy || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_2') }}:
						{{ recordInfo.secAuditAt || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_remark_2') }}:
						<span class="txtfeed world_break">
							{{ recordInfo.secAuditRemark || '-' }}
						</span>
					</div>
				</div>
			</div>
		</div>
		<image-viewer
			v-if="imgVisible"
			:visible.sync="imgVisible"
			:url-list="bigImage"
		/>
		<!-- <el-dialog
			:title="$t('funds.fund_audit.picture')"
			:visible.sync="imgVisible"
			:destroy-on-close="true"
			class="imgCenter"
		>
			<div class="img-box">
				<img v-lazy="bigImage" />
			</div>
		</el-dialog> -->
		<!--一审二审通过，拒绝-->
		<el-dialog
			center
			:visible.sync="visible"
			:before-close="closeFormDialog"
			width="630px"
			class="audit-confirm"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="auto"
			>
				<!-- <el-form-item
					v-if="action == 1"
					:label="$t('common.google_key')"
					prop="googleKey"
				>
					<el-input
						v-model="form.googleKey"
						clearable
						type="text"
						style="width: 380px"
						v-input="{ name: 'num_alp' }"
						:placeholder="$t('common.please_enter_google_key')"
					></el-input>
				</el-form-item> -->
				<el-form-item
					:label="$t('funds.fund_audit.audit_dialog_title')"
					prop="remark"
				>
					<el-input
						v-model="form.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						v-input="{ name: 'noEmpty' }"
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeFormDialog">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="openSeaMoonDialog(true)">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<GoogleKeyInput
			:isShowdialog="isShowdialog"
			@getGoogleKey="getGoogleKey($event)"
			@backPrevStep="backPrevStep()"
		></GoogleKeyInput>
		<SeaMoonDialog
			:sea-moon-visible.sync="seaMoon.visible"
			:params="seaMoon.params"
			@success="onSeaMoonValidSucceed"
		></SeaMoonDialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
import SeaMoonDialog from '@/components/SeaMoon'
import { mapGetters } from 'vuex'
import AuditConfirm from '@/components/AuditConfirm'

export default {
	components: {
		SeaMoonDialog,
		AuditConfirm,
		GoogleKeyInput: () => import('@/components/GoogleKeyInput')
	},
	mixins: [list, summaryList],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		activeName: {
			type: String,
			default: ''
		},
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		this.auditOne = this.throttle(this.auditOne, 1000)
		return {
			list: {},
			form: {
				remark: '',
				googleKey: ''
			},
			subSummary2: {},
			visible: false,
			action: undefined,
			imgVisible: false,
			venueConfList: [],
			proxyBaseInfo: {},
			recordInfo: {},
			bigImage: '',
			seaMoon: {
				isAudit: false,
				visible: false,
				params: {}
			},
			isShowdialog: false
		}
	},
	computed: {
		formRules() {
			return {
				googleKey: [
					{
						required: true,
						message: this.$t('common.please_enter_google_key'),
						trigger: 'blur'
					}
				],
				remark: [
					{
						required: true,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				]
			}
		},
		...mapGetters(['googleKeyResult'])
	},
	created() {
		this.getInfo()
	},
	methods: {
		onSeaMoonValidSucceed(data) {
			if (this.seaMoon.isAudit) {
				this.auditOne()
			}
		},
		openSeaMoonDialog(form) {
			this.isShowdialog = true
			this.form = {
				...this.form,
				...form
			}
		},
		closeFormDialog() {
			this.visible = false
			this.form.remark = undefined
			this.form.googleKey = undefined
		},
		confirm(action) {
			this.form.remark = ''
			this.form.googleKey = ''
			this.action = action
			this.visible = true
			this.$refs.form && this.$refs.form.clearValidate()
		},
		backPrevStep() {
			this.disabledBtn = false
			this.isShowdialog = false
		},
		getGoogleKey(data) {
			this.isShowdialog = false
			/**
			 * 审核结果 - auditStatus (1=通过 2=拒绝)
			 * id(18) - id
			 * 订单状态 - orderStatus (1=待一审,2=一审审核,3=待二审,4=二审审核,5=一审拒绝,6=二审拒绝,7=审核通过)
			 * 备注 - remark
			 * 业务类型 - userType (0=会员 1=代理)
			 */
			const params = {
				orderId: this.rowData.id,
				remark: this.form.remark,
				auditStep: this.activeName === '0' ? 1 : 2,
				result: this.form.status ? true : false
				// orderStatus: this.rowData.orderStatus,
				// userType: 1
			}
			if (this.form.status === 1) {
				params.googleVerifyCode = data
			}
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.saveAudit(params)
				.then((res) => {
					loading.close()
					if (res?.code === 200) {
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.visible = false
						this.$emit('goBack', true)
					} else {
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					loading.close()
				})
		},
		goBack() {
			this.$emit('goBack')
		},
		lookGame(val) {
			this.imgVisible = true
			this.bigImage = val.split(',')
		},
		getInfo() {
			/**
			 * id(18) - id
			 * 商户ID(18) - merchantId
			 */
			const params = {
				id: this.rowData.id,
				merchantId: this.rowData.merchantId
			}
			this.$api.findDetailById(params).then((res) => {
				if (res?.code === 200) {
					this.loading = false
					this.proxyBaseInfo = res.data.proxyBaseInfo || {}
					this.recordInfo = res.data.recordInfo || {}
					this.venueConfList = res.data.venueConfList || []
					let num = 0
					this.venueConfList.forEach((ele) => {
						num += ele.validBetAmount
					})
					this.subSummary2 = {
						validBetTotal: num,
						amountTotal: this.recordInfo.amount
					}
				} else {
					this.loading = false
					this.$message({
						message: res?.msg,
						type: 'error'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.audit-confirm {
	text-align: left;
}
.review-content {
	margin: 24px 16px 20px 16px;
	color: #666666;
	.review-table {
		width: 100%;
		text-align: center; /*文本居中*/
		border-collapse: collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
		border-spacing: 0;
		border: 1px solid rgba(238, 230, 230, 0.562);
		td {
			border-right: 1px solid rgba(238, 230, 230, 0.562);
			border-bottom: 1px solid rgba(228, 220, 220, 0.562);
			height: 36px;
			font-size: 12px;
			line-height: 36px;
			width: 13%;
		}
		.td-title {
			width: 7%;
			background: rgb(239, 239, 239);
		}
	}
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0;
			padding: 30px;
			.name {
				font-weight: 600;
				span {
					margin-left: 10px;
					font-weight: 400;
				}
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;
				div {
					display: inline-block;
					width: 24%;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
	::v-deep .el-form-item__error {
		left: 0;
	}
	.reason {
		word-break: break-all;
	}
}
</style>
